﻿<html>
<head>
	<title>Solar System</title>
	<link rel="stylesheet" type="text/css" href="styles.css"/>
	<script type="text/javascript" src="js/lib/dateExt.js"></script>
	<script type="text/javascript" src="js/lib/html.js"></script>
	<script type="text/javascript" src="js/lib/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="js/lib/raphael-min.js"></script>
	<script type="text/javascript" src="js/solarSystem.js"></script>
	<script type="text/javascript" src="js/solarSystemCalc.js"></script>
	
	<style type="text/css">
		body{
			font-family: Verdana, Arial, Sans-serif;
		}
		#solar{
			margin:5px;
		}
	</style>
	
	<script type="text/javascript">
		function buildPlanetBoxes(){with(Html){
			var planets = ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"];
			$("#planetBoxes").html(markup(
				apply(planets, function(pln){
					return div(
						span(pln),
						input({type:"checkbox", value:pln, checked:true})
					);
				})
			));
			
			$("#planetBoxes input").click(function(){var _=$(this);
				var planets = {};
				$("#planetBoxes input").each(function(i, inp){inp = $(inp);
					if(inp[0].checked) planets[inp.val()] = true;
				});
				$("#solar").solarSystem({displayPlanets:planets});
			});
		}}
		
		$(function(){
			buildPlanetBoxes();
			
			$("#date").val(DateExt.format.shortDigits.toString(new Date()))
				.change(function(){
					try{
						$("#solar").solarSystem({today: DateExt.format.shortDigits.parse($("#date").val())});
					}
					catch(e){}
				});
			$("#viewType").change(function(){
				$("#solar").solarSystem({viewType:$("#viewType").val()});
			});
			
			$("#solar").solarSystem({
				w:600, h:550, 
				color:{back:"#004", fore:"#ccf"},
				viewType: $("#viewType").val()
			});
		});
	</script>
</head>
<body>
	<h1>Solar System</h1>
	<table border="0" cellpadding="0" cellspacing="15">
		<tr>
			<td valign="top">
				<div id="solar"></div>
				Date: <input type="text" id="date"/>
				View:
				<select id="viewType">
					<option value="reg" selected>regular</option>
					<option value="log">logarithmic</option>
					<option value="prop">proportional</option>
				</select>
				<div id="planetBoxes"></div>
			</td>
			<td valign="top">
				<div><input type="text" id="calcScale"> Масштаб <input type="button" value="Вычислить" onclick="SolarSystemCalc.calc()"></div>
				<div id="calcPnl"></div>
			</td>
		</tr>
	</table>
	
	<div>
		<p>См. также</p>
		<ul>
			<li><a href="http://upload.wikimedia.org/wikipedia/commons/9/9f/Solarmap.png">Карта Солнечной системы</a></li>
			<li><a href="http://ru.wikipedia.org/wiki/%D0%93%D0%B5%D0%BB%D0%B8%D0%BE%D1%81%D1%84%D0%B5%D1%80%D0%B0">Гелиосфера</a></li>
			<li><a href="http://upload.wikimedia.org/wikipedia/commons/6/62/Kuiper_oort_ru.png">Облако Оорта</a></li>
			<li><a href="http://www.solarsystemscope.com/">Advanced Solar System Model</a></li>
		</ul>
	</div>
	
</body>
</html>